<template>
  <div>
    <div class="provider-list">
      <div class="content">
        <div class="project-info">
          <div class="form-left-right">
            <el-form
              style="max-width: 1200px"
              :model="form"
              :rules="rules"
              ref="formRef"
              label-position="top"
            >
              <el-form-item label="标题：" prop="biaoti">
                <el-input size="large" v-model="form.biaoti" />
              </el-form-item>
              <el-form-item label="类型：" prop="leixing">
                <el-select
                  v-model="form.leixing"
                  size="large"
                  placeholder=""
                  style="width: 240px"
                >
                  <el-option
                    v-for="item in type"
                    :key="item.dicValue"
                    :label="item.dicLabel"
                    :value="item.dicValue"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="资讯描述：" prop="zixunmiaoshu">
                <el-input size="large" v-model="form.zixunmiaoshu" />
              </el-form-item>
              <el-form-item label="选择文件：" prop="wenjian">
                <bjz-oss
                  :previewList="form.wenjian"
                  :accept="['.jpg', '.png', '.jpeg']"
                  @success="successImg"
                  @remove="removeImg"
                />
              </el-form-item>
              <el-form-item
                class="vue-editor"
                label="资讯内容："
                prop="zixunneirong"
              >
                <editor :initValue="form.zixunneirong" @onVal="onVal" />
              </el-form-item>
              <el-form-item label="状态：">
                <el-radio-group v-model="form.shangjia">
                  <el-radio :label="1">上架</el-radio>
                  <el-radio :label="0">下架</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="button-group">
                <el-button
                  style="margin-left: 100px"
                  type="primary"
                  @click="submitForm(formRef)"
                  >提交</el-button
                >
                <el-button
                  type="primary"
                  style="margin-left: 50px"
                  @click="$router.go(-1)"
                  >取消</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, toRefs, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { GetDynamic, AddDynamic, EditDynamic } from "@/api/dynamic";
import { GetDictionaryTree } from "@/api/system";
import { baseMsg } from "@/utils/utils";
export default defineComponent({
  setup() {
    const route = useRoute();
    const router = useRouter();
    const formRef = ref(null);
    const validateImg = (rule, value, callback) => {
      if (state.form.wenjian && state.form.wenjian.length) {
        callback();
      } else {
        callback(new Error("请上传文件"));
      }
    };
    const state = reactive({
      form: {
        biaoti: "",
        leixing: "",
        zixunmiaoshu: "",
        wenjian: [],
        shangjia: 1,
        // 富文本
        zixunneirong: "",
        shangjia: 0,
      },
      rules: {
        biaoti: [
          {
            required: true,
            message: "请输入标题",
            trigger: "blur",
          },
        ],
        leixing: [
          {
            required: true,
            message: "请选择类型",
            trigger: "change",
          },
        ],
        zixunmiaoshu: [
          {
            required: true,
            message: "请输入咨询描述",
            trigger: "blur",
          },
        ],
        wenjian: [
          {
            required: true,
            trigger: "blur",
            validator: validateImg,
          },
        ],
        zixunneirong: [
          {
            required: true,
            message: "请输入咨询内容",
            trigger: "blur",
          },
        ],
      },
      type: [],
      // 规格名称
      formatName: "",
      // 规格价格
      formatPrice: null,
      total: 0,
    });
    // 根据id查询资讯内容
    const GetDynamicInfo = () => {
      if (route.query.type == "edit") {
        GetDynamic({ id: route.query.id }).then((res) => {
          if (res.code === 4201) {
            state.form = res.data;
          }
        });
      }
    };
    // 资讯动态类型下拉查询
    const GetType = async () => {
      const res = await GetDictionaryTree({ dicModel: "dongtaizixunleixing" });
      if (res.code == 4201) {
        state.type = res.data;
      }
    };
    // 专家图片上传
    const successImg = (res) => {
      state.form.wenjian.push(res);
    };
    // 上传文件删除
    const removeImg = (index) => {
      state.form.wenjian.splice(index, 1);
    };
    // 富文本编辑器
    const onVal = (val) => {
      state.form.zixunneirong = val;
    };
    // 提交表单
    const submitForm = async (formEl) => {
      if (!formEl) return;
      await formEl.validate((valid, fields) => {
        if (valid) {
          if (route.query.type == "add") {
            AddDynamic(state.form).then((res) => {
              if (res.code == 4202) {
                baseMsg("新增资讯动态成功");
                router.go(-1);
              }
            });
          }
          if (route.query.type == "edit") {
            EditDynamic(state.form).then((res) => {
              if (res.code == 4202) {
                baseMsg("编辑资讯动态成功");
                router.go(-1);
              }
            });
          }
        }
      });
    };
    GetType();
    GetDynamicInfo();
    return {
      ...toRefs(state),
      submitForm,
      formRef,
      onVal,
      GetDynamicInfo,
      successImg,
      removeImg,
      GetType,
    };
  },
});
</script>
<style lang="scss" scoped>
.content {
  border: none !important;
}
.project-info {
  padding: 30px 100px;
  font-size: 20px;
  color: black;
  display: flex;
}
.el-form-item {
  display: flex;
  align-items: center;
  &.vue-editor {
    align-items: baseline;
  }
}
:deep(.form-left-right) {
  .el-form-item .el-form-item__label {
    min-width: 95px;
    margin-bottom: 0 !important;
  }
}
</style>
<style lang="scss">
.button-group {
  .el-form-item__content {
    width: 100% !important;
    justify-content: center;
  }
}
</style>
